// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($font-path: '/media/protocol/fonts', $image-path: '/media/protocol/img');

#firefox-app-store-banner {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    overflow: hidden;
    position: relative;
    z-index: 1000; // banner shares same z-index as sticky nav.

    // conditional messaging for iOS (Android is default)
    .show-ios {
        display: none;
    }

    .ios & {
        .show-ios {
            display: block;
        }

        .show-android {
            display: none;
        }
    }

    &.c-banner {
        background: #f2f2f2;
        display: none;

        // conditional class used to display the banner.
        &.c-banner-is-visible {
            display: block;
        }
    }

    .c-banner-icon {
        @include bidi(((margin-right, $spacing-sm, margin-left, 0),));
        border-radius: $border-radius-md;
        display: block;
        height: 57px;
        width: 57px;
    }

    .c-banner-button {
        @include bidi(((margin-left, auto, margin-right, 0),));
        @include text-body-md;
        background-color: #68a036;
        border-radius: $border-radius-sm;
        color: $color-white;
        padding: $spacing-xs $spacing-md;
        text-decoration: none;

        html[lang^='en'] & {
            text-transform: uppercase;
        }
    }

    .c-banner-link {
        @include bidi(((margin-left, auto, margin-right, 0),));
        @include text-body-lg;
        text-decoration: none;
    }

    .mzp-l-content {
        padding-top: $spacing-md;
        padding-bottom: $spacing-md;
    }

    .c-banner-copy {
        @include text-body-xs;
    }

    .c-banner-title {
        @include bidi(((padding-right, $spacing-lg, 0), (padding-left, 0, $spacing-lg),));
        @include text-body-md;
        color: $color-black;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
        font-weight: 500;
        line-height: 1.2;
        margin: 0;
        padding: 0;
    }

    .c-banner-main {
        @include align-items(center);
        @include flexbox;

        p {
            margin: 0;
        }
    }

    // Close button
    .c-banner-close {
        @include bidi(((margin-right, $spacing-sm, margin-left, 0),));
        @include image-replaced;
        background: transparent url('#{$image-path}/icons/close.svg') center center no-repeat;
        @include background-size(15px 15px);
        border: none;
        cursor: pointer;
        display: block;
        height: 21px;
        min-width: 0;
        padding: 0;
        width: 21px;

        &:hover,
        &:focus {
            @include transform(scale(1.1));
            @include transition(transform 0.1s ease-in-out);
        }

        &:focus {
            outline: 1px dotted $color-white;
        }

        // hide the 'Close' text
        span {
            @include visually-hidden;
        }
    }
}
